import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import { Link, useHistory } from 'react-router-dom'

export default function NotFound() {
  const [time, setTime] = useState(3)
  const history = useHistory()
  useEffect(() => {
    //   time变了 就会执行一次useEffect
    let timer = setTimeout(() => {
      setTime(time - 1)
    }, 1000)
    // 判断下当time=0清除定时器 跳转首页
    if (time === 0) {
      // 清除定时器
      clearTimeout(timer)
      //   跳转首页
      history.push('/home')
    }
  }, [time, history])
  return (
    <div>
      <h1>对不起，你访问的内容不存在...</h1>
      <p>
        {time} 秒后，返回<Link to="/home">首页</Link>
      </p>
    </div>
  )
}
